<template>
  <div>
    <!--轮播图-->
    <div class="block">
      <el-carousel class="carousel" height="300px">
        <el-carousel-item v-for="(item,index) in images" :key="index">
          <el-image
              :src="item.src"
              style="width: 100%;height: 100%"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>

<!--    评论区-->
    <el-card class="box-card">
      <template #header>
        <div class="header">
          <span>评论区</span>
          <el-button type="primary" @click="dialogVisible=true">发帖子</el-button>
        </div>
      </template>

      <div v-if="postList.length===0">当前无人留言,尝试发个帖子吧！</div>
<!--      帖子列表-->
      <div v-for="(item,index) in  postList" :key="item.id" class="text-item">
        <div class="h">    <!--疑问：通过名字判断？名字一样就可以删除？-->
          <h5>{{item.userName}}  <span v-if="loginUsername===item.userName"> (我)</span>  </h5>
              <button v-if="loginUsername===item.userName"  @click="deletedialogVisible = true;deletePostId=item.id"><el-icon><Delete /></el-icon></button>
        </div>

          <h3 class="title1">{{item.title}}</h3>

        <div>:{{item.text}}</div>

<div class="-button--">
        <button  @click="pointer(item.id)"><el-icon><Pointer /></el-icon>{{item.likeNum}}</button>
        <button  @click="chat(item.id,index);console.log(commentList[index],66)"><el-icon><ChatDotRound /></el-icon></button>
        <button  @click="star"><el-icon><Star /></el-icon>{{item.favorNum}}</button>
</div>


<!--        展开评论-->
        <div v-if="isChatList[index]">
          <el-input :placeholder="'回复'+item.userName+':'"   v-model="submitCommentList[index]"></el-input>
          <el-button class="comment" type="primary" @click="submitComment(item.id,index)"  :disabled="!submitCommentList[index]">评论</el-button>

          <h2 v-if="commentList[index]">共{{commentList[index].length}}条评论</h2>
          <hr v-if="commentList[index] && commentList[index].length!==0">

          <div v-for="(item1,index1) in  commentList[index]" :key="item1.id" class="text-item">
            <div class="h">
            <h5>{{item1.userName}}  <span v-if="loginUsername===item1.userName"> (我)</span>  </h5>
            <button v-if="loginUsername===item1.userName"  @click="deleteCommentdialogVisible = true;deleteCommentId=item1.id;deletePostId=item.id;postIndex=index"><el-icon><Delete /></el-icon></button>
            </div>

            <div>:{{item1.text}}</div>

            <div class="-button--">
              <button  @click="pointer(item1.id)"><el-icon><Pointer /></el-icon>{{item1.likeNum}}</button>
              <button  @click="star"><el-icon><Star /></el-icon>{{item1.favorNum}}</button>
            </div>    <!--疑问-->
            <hr v-if="index1+1 !== commentList[index].length">


          </div>

        </div>


        <hr v-if="index+1 !== postList.length">

      </div>
    </el-card>
<!--    删除帖子-->
    <el-dialog
        class="deleteDialog"
        v-model="deletedialogVisible"
        title="删除"
        width="500"
        :showClose="false"
    >
      <span>确定要删除该条帖子吗</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deletedialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deletePost(deletePostId)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--            删除评论dialog-->
    <el-dialog
        class="deleteDialog"
        v-model="deleteCommentdialogVisible"
        title="删除"
        width="500"
        :showClose="false"
    >
      <span>确定要删除该条评论吗</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteCommentdialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deleteComment(deleteCommentId,deletePostId,postIndex)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
<!--    发布帖子-->
    <el-dialog
        v-model="dialogVisible"
        width="60%"
    :showClose="false"
    :closeOnClickModal="false">
      <div class="f">
      <h5>发布帖子</h5>
      </div>
      <hr>
      <el-input placeholder="请用简练的文字描述问题,并以“？”结尾" v-model="title" class="title"></el-input>
      <el-input  v-model="text" type="textarea" :rows="10" placeholder="请输入内容"></el-input>

<div class="footer">
    <el-button @click="dialogVisible = false,title='',text=''">取 消</el-button>
    <el-button type="primary" @click="submitPost">发 布</el-button>
</div>
    </el-dialog>

  </div>
</template>

<script >
import API from '@/api/communitation'
import {Document} from "@element-plus/icons-vue";
export default {
  components: {Document},
  data() {
    return {
      postIndex:null,
      deleteCommentId:null,
      deletePostId:null,
      images:[
        {
          id:0,
          src:'https://uploadfiles.nowcoder.com/images/20240226/938692862_1708946126196/D1977B961E14650000E29F3479021162'
        },
        {
          id:2,
          src:'https://uploadfiles.nowcoder.com/images/20240223/451835503_1708657559614/C54EA6464ADF27548AE28EBA73F1A8D6',
        },
        {
          id:3,
          src:'https://uploadfiles.nowcoder.com/files/20240228/841502154_1709094624156/求职置顶缩小.png',
        }
      ],
      dialogVisible:false,
      title:'',
      text:'',
      postList:[],
      isChatList:[],
      submitCommentList:[],
      commentList:[],
      loginUsername:'',
      deletedialogVisible:false,
      deleteCommentdialogVisible:false,
    };
  },
  mounted() {
    this.listPost()
    this.setUsername()
  },
  methods: {
//设置用户名进localStorage备用
      setUsername (){
      let token = localStorage.getItem('token')
      let userphone =localStorage.getItem('loginuserphone')
        API.userInfolist({
        "size": 1,
        "current": 1,
        "phone": userphone
      },token).then(res=>{
          console.log(res,6666)
        let username=res.data.content.records[0].username
        this.loginUsername=username
        localStorage.setItem('loginusername',username)
      }).catch(error=>{
        console.log(error)
      })
    },

    //发表评论
    submitComment(id,index){
        if(this.submitCommentList[index]){
          let param={}
          param.communicationId=id
          param.text=this.submitCommentList[index]
          let token=localStorage.getItem('token')
          API.createComment(param,token).then(res=>{
            if(res.data.code==='0'){
              this.$message.success('评论成功')
              this.submitCommentList[index]=''
              this.listComment({
                communicationId:id
              },token,index)
            }
          }).catch(err=>{
            console.log(err)
          })
        }

    },

    //点赞
    pointer(){
      
    },

    //查询评论
    listComment(param,token,index){
      API.queryComentList(param,token).then(res=>{
        this.commentList[index]=res.data.content.records
      }).catch(err=>{
        console.log(err)
      })
    },
    //点击评论
    chat(id,index){
      this.isChatList[index]=!this.isChatList[index]
      let token = localStorage.getItem('token')
      let param={
        communicationId:id
      }
      this.listComment(param,token,index)
    },

    //点击收藏
    star(){

    },

    //发布帖子
    submitPost(){
      if(this.title.trim()==='') {
        this.$message.error('请输入帖子标题');
        return;
      }
      if(this.text.trim()==='') {
        this.$message.error('请输入帖子内容');
        return;
      }
      this.dialogVisible=false
      let param={}
      param.title=this.title
      param.text=this.text
      let token =localStorage.getItem('token')
       API.createCommunication(param,token).then(res=>{
         if(res.data.code==='0'){
           this.$message.success('发布成功')
           this.title=''
           this.text=''
           this.listPost()
         }
       }).catch(error=>{
         console.log(error)
       })
    },
    //查询所有帖子
    listPost(){
      let token=localStorage.getItem('token')
      let param={
      }
      API.listCommunication(param,token).then(res=>{
        if(res.data.code==='0'){
          this.postList=res.data.content.records
          console.log(this.postList,66666)
          this.isChatList=[]
          for(let i=0;i<this.postList.length;i++){
            this.isChatList.push(false)
          }
        }
        console.log(this.postList)
      }).catch(err=>{
        console.log(err)
      })
    },

    //删除帖子
    deletePost(id){
      console.log(id,'id');
      console.log(this.deletePostId,'deleid')
      if(id===this.deletePostId){
        this.deletedialogVisible=false
        let token =localStorage.getItem('token')
        API.deleteCommunication({
          id:id
        },token).then(res=>{
          if(res.data.code==='0'){
            this.$message.success('删除成功')
            this.submitCommentList=[]
            this.listPost()
          }
        }).catch(err=>{
          console.log(err)
        })
      }
      else{
        console.log(111)
      }
    },
    //删除评论
    deleteComment(id,communicationId,index){
        this.deleteCommentdialogVisible=false
      let token=localStorage.getItem('token')
      API.deleteComent({
        id:id
      },token).then(res=>{
        if(res.data.code==='0'){
          this.$message.success('评论删除成功')
          this.listComment({
            communicationId:communicationId
          },token,index)
        }
      })
    }
  }
};

</script>

<style scoped>

 .text-item .h{
  display: flex;
   justify-content: space-between;
}
 .text-item .h button{
  border: none;
  background-color: white;
  outline: none;
}
 .text-item .-button--{
   margin-top: 25px;
 }
 .text-item .-button-- button {
   margin-right: 25px;
   border: none;
   background-color: white;
   outline: none;
 }
 .comment{
   margin-left: 92%;
   margin-top: 15px;
 }
.notice {
  width:1500px;
  font-size:17px;
  margin-top: 10px;
  padding: 10px;
  background-color: transparent;
  border: 2px solid #333;
}
 .title1{
   font-weight: bold;
 }
.carousel{
  margin-left: 15%;
  margin-right: 15%;
}
 .title{
   margin-bottom: 15px;
 }
 .box-card{
   margin-left: 15%;
   margin-right: 15%;
 }
 .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
 .f{
   margin-top: -50px;
 }
 .footer{
   margin-top: 15px;
   text-align: center;
 }

 /deep/ .deleteDialog{
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   margin: 0px !important;
 }


</style>